<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <link rel="stylesheet" href="css/webuploader.css" />

        <script src="jquery-1.11.3.min.js"></script>
        
         <script src="webuploader.js"></script>
       <script src="UploadPreview.js"></script>
        <style>
            ._filelist .preview-box{/*这个选择器一定要有宽高，否则图片显示不出来，因为它里面的内容是绝对定位的*/
                width: 280px;
                height: 160px;
            }
            .choose-file-btn{
                width: 180px;
                height: 80px;
                background-color: #f60;
                overflow: hidden;
            }
            .drop-area{
              height: 200px;
              line-height: 200px;
              border: 2px dashed #f60;
              text-align: center;
              font-size: 18px;
              color: #666;
            }

        </style>
    </head>
    <body>
      
        <!-- .webuploader-pick 这个类可以控制选择文件可点按钮的大小 -->
        <h1>即可以选择图片又可以选择其他文件</h1>
        <!-- <div class="drop-area">
          <span>请将图片拖拽到这里。。。</span>
        </div> -->
        <div id="uploader"></div>
        <!-- 千万不要使用button标签，否则在火狐和IE中点击会无效
        <button type="button" id="choose_file">选择图片</button> -->
        <div id="choose_file_wraper" style="display: none;">
            <div class="choose-file-btn" id="choose_file">选择图片</div>    
        </div>
        
        <br />
        <button type="button" id="render_btn">渲染按钮</button>
        <button type="button" id="disable_btn">禁用按钮</button>
        <button type="button" id="enable_btn">启用按钮</button>
        <button type="button" id="upload_now">上传图片</button>
        <button type="button" id="getFiles">查看获取到的文件</button>
        <button type="button" id="addData">添加数据</button>

<br />
<div></div>
        <div class="_filelist file-list">
            <div class="preview-box">
                <p class="title">me.jpg</p>
                <div class="imgWrap">
                     <p class="previewing">预览中...</p>
                    <!-- <img src="temp-img/s1.jpg" alt="" /> -->
                </div>
                <p class="progress"><span></span></p>
                <div class="file-panel">
                    <span class="cancel">删除</span>
                    <span class="rotateRight">向右旋转</span>
                    <span class="rotateLeft">向左旋转</span>
                </div>
                <!-- <p class="error"></p>
                <span class="success"></span> -->
            </div>
        </div>

        



       <script>
          var uploader = new UploadPreview({
                swf: "Uploader.swf",
                url: "README.md",
                previewInfo: {//预览参数配置
                    width: -1, //预览图片的宽度
                    height: -1, //预览图片的高度
                    //errorTipShow: false,
                    toolBtnShowOnUpload: true,
                    viewImgHorizontal: true,//预览图是否水平垂直居中
                    previewClass: "new-preview",//每个预览框的class
                    previewElement: "div",//每个预览框的元素，只能为字符串
                    showToolBtn: true, //当鼠标放在图片上时是否显示工具按钮,
                    onlyDel: false,//是否只生成"删除"按钮
                    previewWrap: ".file-list"//包裹所有预览图片的父级元素
                },
                /*drag: {//拖拽上传配置
                  dnd: ".drop-area",// 指定Drag And Drop拖拽的容器，如果不指定，则不启动
                  disableGlobalDnd: true,// 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
                  paste: "body"// 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
              },*/
              //multiple: false,
               // maxFileSize: (1024 * 1024),
               header: {
                  "token": +new Date
               },
                maxFileNum: 5,
               // maxFileTotalSize: 1024*1024*5,
                btns: {
                    //uploadBtn: document.getElementById("upload_now"), //开始上传按钮
                    retryBtn: null, //用户自定义"重新上传"按钮
                    chooseBtn: document.getElementById("choose_file"),// 指定选择文件的按钮容器，不指定则不创建按钮。选择器支持 id, class, dom。
                    chooseBtnText: "选择图片",//选择文件按钮显示的文字
                    chooseBtnCanUseOnFinish: false,
                    uploadBtnCanUsOnFinish: false
                },
                error: function (errorCode){
                    console.log(errorCode);
                },
                maxFileSize: 8388608,
                pictureOnly: false,
                ignore: {
                    extensions: ".txt,doc"
                },
                beforeFileQueued: function (WuFile){
                    console.log(WuFile)
                    if(WuFile.name.indexOf("uploadpreview需求") != -1){
                      console.log("uploadpreview需求.png是不允许添加进去的！");
                      return false;
                    }
                },
                fileQueued: function (WuFile){
                    uploader.setData(WuFile,{
                        fileId: new Date().getTime()
                    });
                    console.log(WuFile);
                    $("#addData").attr("data-id", WuFile.id);
                    //console.log(WuFile)
                    //console.log("添加图片了！");
                },
                uploadError: function (WuFile,reason){
                  console.log(reason);
                },
                uploadStart: function (WuFile){
                  console.log(WuFile);
                },
                uploadFinish: function (){
                  console.log(456);
                },
                onDelUploaded: function (){
                  //return false; 
                }
           });

          uploader.setData({
            test: "sdfsdfsdfgsd",
            "df15": 65564
          });
          

          console.log(uploader);
          console.log(WebUploader);

          

          //console.log(uploader.uploader);
        /*  $("#upload_now").on("click", function (){
                //uploader.uploader.upload();
                console.log(uploader.chooseBtnInput);
          });*/
          $("#upload_now").on("click", function (){
              uploader.setHeader({
                "token2": "liyannan"
              });
              uploader.upload();
          });
          $("#render_btn").on("click", function (){
                $("#choose_file_wraper").show();
                uploader.refresh();
          });
          $("#disable_btn").on("click", function (){
               // $("#choose_file").show();
                uploader.disable();
          });
          $("#enable_btn").on("click", function (){
               // $("#choose_file").show();
                uploader.enable();
          });
          $("#getFiles").on("click", function (){
                console.log(uploader.uploader.getFiles());
          });
          $("#addData").on("click", function (){
                uploader.setData($(this).data("id") ,{
                    "hello": "我是新添加进来的数据！"
                });
          });


       </script>
    </body>
</html>